<template>
  <!-- 导航栏
         van-nav-bar
            left-text:左边文本
            right-text:右边文本
            title:中间文本
            left-arrow:左边
            slot="left/title/right"
emit
   定义 :子组件标签定义一个方法  @子组件方法名=父组件方法
   触发:子组件内  this.$emit("子组件方法名",参数)
只需要知道路由地址
       -->
  <div class="navbar">
    <van-nav-bar @click-left="$router.push(path)">
      <template #left>
        <i class="iconfont">&#xe637;</i>
      </template>
      <template #title>
        <div class="title">{{ title }}</div>
      </template>
      <template #right>
        <div class="value" v-if="show" @click="onClick">保存</div>
      </template>
    </van-nav-bar>
  </div>
</template>
<script>

export default {
  props: ['title', 'path', 'show'],
  data () {
    return {
      // show: true
    }
  },
  methods: {
    onClick () {
      // 本组件作为子组件 , 在这里给保存按钮设置了点击事件 , 如果父组件要使用这个点击事件 , 我们必须把这个方法传给父组件 , 也就是暴露出去
      this.$emit('onClick')
      
    }
  }
}
</script>
<style lang="less" scoped>
.navbar {
  /deep/ .van-nav-bar__left {
    padding-left: 0;
    i.iconfont {
      font-size: 45px;
    }
  }
  .value {
    font-size: 16px;
  }
}
</style>
